<template>
  <div class="app-common-table">
    <el-table
      v-loading="loading"
      :data="Array.isArray(tableData) ? tableData : [tableData]"
      @selection-change="handleSelectionChange">>
      <template
        v-for="(item, index) in tableHead"
      >
        <el-table-column
          v-if="item.prop === 'userList'"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.userList.length ? scope.row.userList.join(','):'-' }}</p>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="index"
          :prop="item.prop"
          :label="item.label"
        />
      </template>
      <el-table-column
        type="selection"
        width="55"/>
    </el-table>
    <el-row
      type="flex"
      justify="end"
      align="middle"
      style="height: 60px">
      <!-- 分页器 -->
      <el-pagination
        style="margin-top: 0"
        :current-page="page"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    // 表格上方的标题
    title: {
      type: String,
      default: null
    },
    // 搜索条件
    searchParams: {
      type: Object,
      default: () => {
        return {
          end_date: '', // 结束时间 2019-8-16
          start_date: '' // 开始时间 2019-8-14
        }
      }
    },
    // 表头以及对应字段
    tableHead: {
      type: Array,
      default: () => []
    },
    // 请求地址
    url: {
      type: String,
      default: null,
      required: true
    }
  },
  data () {
    return {
      // 表格数据
      tableData: [],
      multipleSelection: [],
      // 分页
      page: 1,
      limit: 10,
      total: 0,
      loading: true
    }
  },
  created () {
    this.handleSearch()
  },
  methods: {
    handleSearch () {
      this.tableData = []
      this.total = 0
      this.loading = true
      console.dir(this.searchParams)
      const params = Object.assign({
        page: this.page,
        limit: this.limit
      }, this.searchParams)
      console.dir(params)

      this.$http.get(this.url, { params }).then(({ data: res }) => {
        this.loading = false
        this.tableData = res.data.list
        this.total = res.data.total
      }).catch(() => {
        this.loading = false
      })
    },
    // 分页组件控制
    handleSizeChange (val) {
      this.limit = val
      this.handleSearch()
    },
    handleCurrentChange (val) {
      this.page = val
      this.handleSearch()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      this.$emit('callback', { multipleSelection: this.multipleSelection })
    }
  }
  /* watch: {
    searchParams: {
      handler (data) {
        this.handleSearch()
      },
      deep: true,
      immediate: true
    }
  } */
}
</script>

<style lang="scss">
.app-common-table {
  padding-top: 20px;
  p {
    line-height: 2;
    font-weight: bold;
    font-size: 20px;
    span {
      float: right;
      color: blue;
    }
  }
}
</style>
